<template>
  <div id="layout">
    <header>
      <div class="nav-list clear" >
        <img src="@/image/logo2.png" class="header-logo" />
        <ul>
          <router-link :to="{ name: 'contact' }" tag="li">首页</router-link>
          <router-link :to="{ name: 'contact' }" tag="li">精品房源</router-link>
          <router-link :to="{ name: 'contact' }" tag="li">联系我们</router-link>
          <router-link :to="{ name: 'contact' }" tag="li">关于我们</router-link>
          <router-link :to="{ name: 'contact' }" tag="li">投诉反馈</router-link>
          <router-link :to="{ name: 'persenCenter' }" tag="li">个人中心</router-link>
          <router-link :to="{ name: 'contact' }" tag="li">退出登陆</router-link>
        </ul>

        
      </div>
      <section>
        <div class="slogan">
          <h4>阳春三月，邂逅春天</h4>
          <h1>春日特惠</h1>
          <router-link :to="{ name: 'contact' }" tag="el-button">进入特惠专场</router-link>
        </div>
      </section>


      <section class="search">
        <h1>顽石民宿给您家一般的温暖，点击立即进入选房环节开启旅程</h1>
        <h3>STONE Homestay gives you the general warmth as your home.</h3><h3> Enter the process of house selection immediately to start the journey</h3>
      </section>
    </header>


    <div class="list-hot">
      <div class="list-bar">
        <div class="bar-box">春熙路</div>
        <div class="bar-box">太古里</div>
        <div class="bar-box">火车南站</div>
        <div class="bar-box">万象汇</div>
        <div class="bar-box">天府三街</div>
        <div class="bar-box">银泰城</div>
        <div class="bar-box">华阳</div>
        <div class="bar-box">更多</div>
      </div>


      <div class="show-list">
        <router-link class="show-box" tag="div" :to="{ name: 'roomDetail' }">
          <img src="https://z1.muscache.cn/pictures/carson/carson-1615448572255/original/8e69f184-dcb3-4ea4-89d8-f5901e40c62f.jpg">
          <div class="show-desc">房源可靠，先到先得</div>
          <div class="show-title">春日去踏青！景观特惠房间春日去踏青！景观特惠房间春日去踏青！景观特惠房间</div>
          <div class="show-price">¥699 每晚</div>
          <div class="show-num">233 条评价</div>
        </router-link>

        <div class="show-box">
          <img src="https://z1.muscache.cn/pictures/carson/carson-1615448572255/original/8e69f184-dcb3-4ea4-89d8-f5901e40c62f.jpg">
          <div class="show-desc">房源可靠，先到先得</div>
          <div class="show-title">春日去踏青！景观特惠房间春日去踏青！景观特惠房间春日去踏青！景观特惠房间</div>
          <div class="show-price">¥699 每晚</div>
          <div class="show-num">233 条评价</div>
        </div>


        <div class="show-box">
          <img src="https://z1.muscache.cn/pictures/carson/carson-1615448572255/original/8e69f184-dcb3-4ea4-89d8-f5901e40c62f.jpg">
          <div class="show-desc">房源可靠，先到先得</div>
          <div class="show-title">春日去踏青！景观特惠房间春日去踏青！景观特惠房间春日去踏青！景观特惠房间</div>
          <div class="show-price">¥699 每晚</div>
          <div class="show-num">233 条评价</div>
        </div>


        <div class="show-box">
          <img src="https://z1.muscache.cn/pictures/carson/carson-1615448572255/original/8e69f184-dcb3-4ea4-89d8-f5901e40c62f.jpg">
          <div class="show-desc">房源可靠，先到先得</div>
          <div class="show-title">春日去踏青！景观特惠房间春日去踏青！景观特惠房间春日去踏青！景观特惠房间</div>
          <div class="show-price">¥699 每晚</div>
          <div class="show-num">233 条评价</div>
        </div>


        <div class="show-box">
          <img src="https://z1.muscache.cn/pictures/carson/carson-1615448572255/original/8e69f184-dcb3-4ea4-89d8-f5901e40c62f.jpg">
          <div class="show-desc">房源可靠，先到先得</div>
          <div class="show-title">春日去踏青！景观特惠房间春日去踏青！景观特惠房间春日去踏青！景观特惠房间</div>
          <div class="show-price">¥699 每晚</div>
          <div class="show-num">233 条评价</div>
        </div>


        <div class="show-box">
          <img src="https://z1.muscache.cn/pictures/carson/carson-1615448572255/original/8e69f184-dcb3-4ea4-89d8-f5901e40c62f.jpg">
          <div class="show-desc">房源可靠，先到先得</div>
          <div class="show-title">春日去踏青！景观特惠房间春日去踏青！景观特惠房间春日去踏青！景观特惠房间</div>
          <div class="show-price">¥699 每晚</div>
          <div class="show-num">233 条评价</div>
        </div>
      </div>
    </div>


    <footer></footer>


  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "1",
      activeIndex2: "1"
    };
  },
  components: {},
  methods: {}
};
</script>

<style lang="scss">
#layout {
  
    background-color: rgb(14,91,73);
  .clear::before,.clear::after{
    content: '';
    display: block;
  }
  .clear::after{
    clear: both;
  }

  header {
    width: 100vw;
    height: 530px;
    background-image: url("https://z1.muscache.cn/pictures/carson/carson-1615448572255/original/8e69f184-dcb3-4ea4-89d8-f5901e40c62f.jpg");
    background-position: center;
    background-size: cover;
    position: relative;

    .header-logo {
      width: 80px;
      height: 80px;
      object-fit: cover;
      float: left;
    }
    .nav-list {
      width: 100vw;
      height: 82px;
      background-color: transparent;
      margin: 0 auto;

      ul {
        text-decoration: none;
        width: 60%;
        float: right;
        display: flex;
        justify-content: space-around;

        li {
          display: inline-block;
          color: white;
          font-size: 20px;
          font-weight: 600;
          height: 78px;
          line-height: 78px;
          cursor: pointer;
        }

        li:hover {
          border-bottom: 4px white solid;
        }
      }
    }

    .slogan{
      width: 1280px;
      margin: 80px auto 0;
      padding-left: 100px;
      h1,h4,.el-button{
        display: block;
        background: transparent;
        color: white;
      }
      h1,h4{
        text-align: left;
        margin-bottom:10px
      }
      .el-button{margin-top: 20px;}
    }

    .search{
      width: 1280px;
      color: white;
      margin: 70px auto 0;
    }
  }
  .list-hot{
    width: 100vw;
    background-color: rgb(14,91,73);
    margin-top: 30px;
    .list-bar{
      width: 1280px;
      height: 60px;
      margin: 30px auto ;
      display: flex;
      align-items: center;
      justify-content: space-between;;
      .bar-box{
        display: inline-block;
        height: 50px;
        border: 3px solid white;
        padding: 0 10px;
        color: white;
        font-size: 22px;
        font-weight: 500;
        line-height: 50px;
        border-radius: 10px;
        margin: 10px;
        cursor: pointer;
      }
    }
    .bar-box:hover{
      border: 3px solid rgb(70, 184, 5);
      color: rgb(52, 136, 3);
    }
    .show-list{
      width: 1280px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-content: flex-start;
      .show-box{
        width: 300px;
        height: 300px;
        background-color: white;
        margin: 10px;
        img{
          width: 280px;
          height: 150px;
          object-fit: cover;
          margin: 10px 10px 0;
        }
        .show-desc{
          margin-left:10px ;
          font-size: 14px;
          color: #5e5b5bef;
          height: 17px;
          line-height: 17px;
          font-size: 600;
          text-align: left;
          margin-top: 10px;
        }
        .show-title{
          width: 280px;
          margin: 10px auto;
          text-align: left;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
        .show-price{
          font-size: 16px;
          font-weight: 300;
          text-align: left;
          margin-left: 10px;
        }
        .show-num{
          margin-left: 10px;
          font-size: 12px;
          font-weight: 300;
          text-align: left;
          margin-top: 10px;
        }
      }
    }

    .show-list:after {
      content: '';
      flex: auto; 
    }

  }

  footer{
    height: 300px;
    width: 100vw;
    
  }
}
</style>
